<template>
	<view class="content">
		<view class="material-v">
			<view class="title">所需材料</view>
			<view class="item" v-for="(item, index) in caipuMaterial" :key="index" >
				<view class="name">{{item.ylName}}</view>
				<view class="many">{{item.ylUnit}}</view>
			</view>
		</view>
		
		<view class="process-v">
			<view class="title">做法流程</view>
			<view class="item-p"  v-for="(item, index) in caipuProcess" :key="index" >
				<view class="pcontent-v">
					({{index+1}}){{item.content}}
				</view>
				<image mode="center" :src="item.imgUrl"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				caipuMaterial:[],
				caipuProcess:[]
			}
		},onLoad() {
			uni.hideLoading();
			this.caipuMaterial = uni.getStorageSync('caipuMaterial');
			this.caipuProcess =	uni.getStorageSync('caipuProcess');
			uni.setNavigationBarTitle({
			    title: uni.getStorageSync('caipuName'),
			});
		}
	}
</script>

<style>
	.material-v{
		background-color: #fff;
		border-radius: 15rpx;
		padding: 20rpx;
		margin: 20rpx;
	}
	.title{
		font-weight: 800;
		margin-bottom: 20rpx;
	}
	.material-v .item{
		display: flex;
		font-size: 32rpx;
		padding: 15rpx 0;
		border-bottom: 1rpx dashed  #999;
	}
	.item .name,.many{
		width: 350rpx;
		text-align: center;
		overflow: hidden;
	}
	.process-v{
		padding: 30rpx;
		background-color: #fff;
		font-size: 32rpx;
	}
	.process-v .title{
		font-size: 40rpx;
	}
	.pcontent-v{
		margin-bottom: 20rpx;
		color: #e98f36;
	}
	.process-v image{
		width: 690rpx;
		border-radius: 15rpx;
	}
</style>
